<div class="role-selection-div" [ngStyle]="{height:height+'px'}">
  <form nz-form [formGroup]="validateForm">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="15">
        <nz-form-item>
          <nz-form-label>角色名</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="角色名" [formControlName]="'roleName'"/>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="9" class="search-area">
        <button nz-button (click)="search()">Search</button>
        <button nz-button (click)="validateForm.reset()">Clear</button>
        <button nz-button class="confirm-btn" nzType="primary" (click)="close()">Confirm</button>
      </div>
    </div>
  </form>

  <div class="table-div">
    <nz-table #smallTable [nzData]="roles" nzSize="small" [nzFrontPagination]="false"
              [nzLoading]="loading" [nzLoadingDelay]="300">
      <tbody>
      <tr *ngFor="let data of smallTable.data" [ngClass]="{'selected-role':isSelected(data.pid)}">
        <td (click)="select(data.pid)" >{{ data.roleName }}</td>
      </tr>
      </tbody>
    </nz-table>
  </div>
  <div class="pagination-div">
    <nz-pagination [(nzPageIndex)]="current" [nzTotal]="count" [nzSize]="'small'" [nzPageSize]="pageSize"
                   (nzPageIndexChange)="search()" (nzPageSizeChange)="search()" nzShowQuickJumper
                   [nzShowTotal]="totalTemplate"></nz-pagination>
    <ng-template #totalTemplate let-total> 一共 {{ total }} 条数据</ng-template>
  </div>
</div>
